<template>
  <div>
      <TopBar>修改手机号</TopBar>
      <div class="setPhoneBox"  style="margin-top:1.5rem">
        <Steps type="1"></Steps>
        <div style="font-size:.42rem;margin:1.3333rem 0 0.7733rem">原手机号码 {{this.phone | hide6Num}}</div>
        <InputType @getValue="getCode" :phone1="phone" title="验证码" class="vux-1px-tb" type1="2" type='editphone'></InputType>
        <div class="setPhoneBtn" @click="next">下一步</div>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import Steps from './children/Steps'
import TopBar from '../../component/common/TopBar'
import InputType from '../setPwd/children/inputType'
import LoginInputCode from '../../component/common/LoginInputCode'
import {setPhone1} from  '../../../service/getData'
import {showMsg,verify,getStore} from '../../../config/mUtils'
import { Toast } from 'vux'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    Steps,
    TopBar,
    InputType,
    LoginInputCode,
    Toast
  },
  beforeCreate(){
      getSDK()
    },
  data(){
    return {
      // phone:'13683181763',
      phone:getStore('phone'),
      valid:'',
      msg:'',
      showPositionValue:false,
    }
  },
  filters:{
    hide6Num:function(val){
      return val.replace(/(\d{3})(\d{6})(\d{2})/,"$1******$3");
    }
  },
  methods:{
    next(){
      if(this.phone ==''){
        showMsg('手机号不能为空',this)
      }else if(this.code == ''){
        showMsg('验证码不能为空',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else if(!verify(this.code,3)){
        showMsg("验证码格式错误",this)
      }else{
        setPhone1(this.phone,this.code)
          .then(res=>{
            //console.log(res)
            if(res.status == 1){
              showMsg(res.msg,this)
              this.valid = res.valid
              time = setTimeout(()=>{
                this.$router.push({
                  name:'SetPhoneStep2',
                  params:{
                    oldphone:this.phone,
                    valid:this.valid
                  }
                })
              },2000)
            }
          })
      }
    },
    getCode(data){
      this.code = data
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .setPhoneBox{
    .wh(8.2933rem,100%);
    margin: 0 auto;
    margin-top: 0.72rem;
    // .bg(yellow)
    .setPhoneBtn{
      .wh(100%,1.1733rem);
      line-height: 1.1733rem;
      text-align: center;
      border: 1px solid #ccc;
      .borderRadius(2rem);
      margin-top: 1.0667rem;
      font-size: .42common/rem;
    }
    .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
  }
</style>
